<template>
	<div class="person">
		<h1>人员信息</h1>
		<h4>姓名：{{ming}}</h4>
		<h4>性别：{{sex}}</h4>
		<h4>年龄：{{age+1}}</h4>
		<h4>昵称：{{chuohao}}</h4>
		<h4>其他信息：</h4>
		<ul>
			<li>是否结婚：{{other.isMarried ? '是' : '否'}}</li>
			<li>联系方式：{{other.phone}}</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'Person',
		// 第一种接收方式（只接收）
		// props:['ming','chuohao','sex','age','other'],

		// 第二种接收方式（接收+限制数据类型）
		/* props:{
			ming:String,
			chuohao:String,
			sex:String,
			age:Number,
			other:Object
		}, */

		// 第三种接收方式（接收 + 限制数据类型 + 指定必要性 + 指定默认值）
		props:{
			ming:{
				type:String,
				required:false,
				default:'李强哥哥'
			},
			chuohao:{
				type:String,
				required:true,
				default:'xiaoHigh'
			},
			sex:{
				type:String,
				required:true,
				default:'未知'
			},
			age:{
				type:Number,
				required:true,
				default:90
			},
			other:{
				type:Object,
				required:true,
				default(){
					return {
						isMarried:false,
						phone:'010-55887766'
					}
				}
			},
		},
	}
</script>

<style scoped>
	.person{
		background-color: skyblue;
		padding: 20px;
	}
</style>